<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>咨客_预订房间</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/util.js" />"></script>
		<script type="text/javascript">
			function onQueryRoom(){
				$('#roomTable').datagrid({
					url: 'queryRoom',
					pageNumber:1,			
					queryParams:{roomNo:$("#roomNo").val(),
						roomType:$("#roomTypeName").combobox('getValue'),
						roomArea:$("#roomAreaName").combobox('getValue'),
						status:''}
				});
			}
			
			function onResetRoom(){
				$("#roomNo").val("");
				$("#roomTypeName").combobox("setValue", "-1");
				$("#roomAreaName").combobox("setValue", "-1");
			}
			
			function onReset(){
				$("#user_name").val("");
				$("#user_mobile").val("");
				$("#booking_date").datebox("setValue", "");
				$("#roomNo").html("");
				$("#roomId").val("");
			}
			
			function onBooking(){
				if($.trim($("#user_name").val()) == ''){
					$.messager.alert('警告','请填写预订人姓名!');	
					return false;
				}
				
				if($.trim($("#user_mobile").val()) == ''){
					$.messager.alert('警告','请填写联系方式!');	
					return false;
				}
				
				if($.trim($("#booking_date").datebox('getValue')) == ''){
					$.messager.alert('警告','请填写预订时间!');	
					return false;
				}
				
				if($.trim($("#roomNo").html()) == ''){
					$.messager.alert('警告','请选择预订房间!');	
					return false;
				}
				
				$.ajax({
					url:'bookingRoom',
					data:{'userName':$("#user_name").val(),
						  'userMobile':$("#user_mobile").val(),
						  'bookingDate':$("#booking_date").datebox('getValue'),
						  'roomId':$("#roomId").val()},
					type:'post',
					dataType:'text',
					async:false,
					cache:false,
					success:function(data){
						if(data == 'success'){								
							onReset();
							onResetRoom();
							onQueryRoom();
							$.messager.alert('操作结果','预订房间成功!');
						}else
							$.messager.alert('操作结果',data);
					}
				});
			}
		</script>
	</head>
	
	<body>
		<c:import url="/WEB-INF/resources/common/consult_header.jsp" />
		
		<h1>预定房间</h1>
		
		<div style="margin-bottom: 10px">
			预订人：<input type="text" name="user_name" id="user_name" style="margin-right: 20px;"/>
			联系方式：<input type="text" name="user_mobile" id="user_mobile" />
		</div>
		<div style="margin-bottom: 10px">
			预订时间：<input class="easyui-datebox" id="booking_date" name="booking_date" data-options="formatter:myformatter,parser:myparser" /><br/>
						<script type="text/javascript">
							function myformatter(date){
								var y = date.getFullYear();
								var m = date.getMonth()+1;
								var d = date.getDate();
								return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
							}
							function myparser(s){
								if (!s) return new Date();
								var ss = (s.split('-'));
								var y = parseInt(ss[0],10);
								var m = parseInt(ss[1],10);
								var d = parseInt(ss[2],10);
								if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
									return new Date(y,m-1,d);
								} else {
									return new Date();
								}
							}
						</script>
		</div>
		预订房间：（请选择） <span id="roomNo" style="color: red;"></span>
					<fieldset style="height:360px;width: 700px;">
						<legend>待选房间</legend>
						<table id="roomTable" class="easyui-datagrid" style="width:700px;height:350px;"
				 			data-options="rownumbers:true,singleSelect:true, border:true,singleSelect:true,toolbar:'#tb',
				 					pagination:true,url:'queryRoom',onClickRow:function(rowIndex, rowData){
					 						$('#roomNo').html(rowData.room_no);
					 						$('#roomId').val(rowData.id);
					 				}">
							<thead>
								<tr>
									<th data-options="field:'room_no',width:80,align:'center'">房间编号</th>
									<th data-options="field:'roomTypeName',width:120,align:'center'">房间类型</th>
									<th data-options="field:'roomAreaName',width:120,align:'center'">房间区域</th>
									<th data-options="field:'capacity',width:120,align:'center'">房间容量</th>
									<th data-options="field:'room_status',width:120,align:'center', formatter:function(value){
											if(value == '${roomStatusFree}')
											    return '空闲';
											else
												return '使用';
										}">房间状态</th>
								</tr>
							</thead>
						</table>
					
						<div id="tb" style="padding:5px;height:auto;padding-bottom: 10px;">
							<form id="queryRoomForm" name="queryRoomForm" action="queryRoom" method="post">
							<div>
								房间编号: <input class="easyui-validatebox" name="roomNo" id="roomNo" style="width:80px">
								&nbsp;&nbsp;&nbsp;&nbsp;
								房间类型:
								<select id="roomTypeName" name="roomTypeName" class="easyui-combobox" data-options="panelHeight:'auto'">
									<option value="-1" selected="selected">所有</option>
									<c:forEach var="code" items="${roomTypeList}">
										<option value="${code.id}">${code.room_type_name}</option>	
									</c:forEach>
								</select> 
								&nbsp;&nbsp;&nbsp;&nbsp;
								房间区域:
								<select id="roomAreaName" name="roomAreaName" class="easyui-combobox" data-options="panelHeight:'auto'">
									<option value="-1" selected="selected">所有</option>
									<c:forEach var="code" items="${roomAreaList}">
										<option value="${code.id}">${code.area_name}</option>	
									</c:forEach>
								</select> 
								<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQueryRoom()">查询</a>
								<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onResetRoom()">清空</a>
							</div>
							</form>
						</div>
					</fieldset>
		<div style="margin-top: 15px;margin-left: 200px;">
			<input type="button" name="bookBtn" id="bookBtn" value="预&nbsp;订" onclick="onBooking()" / >
			&nbsp;&nbsp;
			<input type="button" name="resetBtn" id="resetBtn" value="清&nbsp;空" onclick="onReset()" />
		</div>
		<input type="hidden" id="roomId" name="roomId" />
	</body>
</html>